<!--复选框-->
<template>
  <div class="example tableClass" id="select">
    <zz-select
      class="mb20"
      :options="{width: '400px'}"
      :option="option"
      :border="true"
      :isFixed = false
      optionBackground="rgba(10, 57, 79, 0.9)"
      selectOption="selectScreenOption"
      name="1111"
      :chooseDefault=" chooseDefault"
      @optionClick="optionClick"
      :icon="true"></zz-select>
    <table cellspacing="0">
      <tr>
        <th>1) 调用文件组件</th>
      </tr>
      <tr>
        <td><pre>{{explameCall}}</pre></td>
      </tr>
      <tr>
        <th>2) 写入到methods方法</th>
      </tr>
      <tr>
        <td><pre>{{explameMethods}}</pre></td>
      </tr>
      <tr>
        <td><pre>{{state}}</pre></td>
      </tr>
    </table>
    <zz-select
      class="mb20"
      :options="{width: '400px'}"
      :option="option"
      :border="true"
      :isFixed = true
      width="auto"
      :chooseDefault=" chooseDefault"
      @optionClick="optionClick"></zz-select>
    <zz-select
      class="mb20"
      :options="{width: '400px'}"
      :option="option"
      :border="true"
      position-top="true"
      :isFixed = false
      width="auto"
      name="1111"
      @optionClick="optionClick"
      :icon="true"></zz-select>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        state: '',
        stateData: '',
        valueData: {id: 1},
        chooseDefault: 0,
        checkEd: true,
        options: {
          1: '如果除了状态 还是传其它的值 需要在data里面设置 （下有示例）',
          2: 222,
          3: 3,
          4: 4,
          5: 5,
          6: 6,
          7: 7,
          8: 8,
          9: 9,
          10: 10
        },
        o: [],
        option: [
          {value: 'A'},
          {value: 'B'},
          {value: 'C'},
          {value: 'D'},
          {value: 'E'},
          {value: '拉拉'}
        ],
        explameCall: `<zz-select
          fontSize="14"  字体的大小
          fontBold="true"  字体是否加粗
          background="#fff" 背景色
          :disabled = false 是否不能选择 默认false
          :triangle = true 是否显示三角形
          :options = {
            width: 100px 一些参数
          }
          :all = false 是否显示全部
          :border = false 是否显示边框
          name="默认显示的内容"
          iconPosition="right" 箭头的位置
          :icon = false 是否显示特殊圆圈
          :chooseDefault = chooseDefault 如果需要重置 就改变这个值 默认是0 this.chooseDefault++
          width="100%" option 的宽度
          maxHeight="200px" 下拉框的高度
          :isFixed = false 在某些情况下 用absolute会出现样式问题， 这时要用 fixed
          :positionTop = false  下拉框位置是否在顶部 默认在底部弹出
          :isFooter = false  自定义下拉框底部位置
          :data = {} 如果需要其它参数， 请使用data
          :option="{
            1: 1,
            2: 2
          }" 下拉框数据的对象格式
          :option="[
            {
              key: 2,
              value: 2
            }, {
              key: 1,
              value: 1
            }
          ]" 下拉框数据的数组格式
          type="choose"  默认改变 框内的内容，  换成其它不改变 比如select
          @optionClick = optionClick 选择回调事件
          ></zz-select>`,

        explameMethods:
          `optionClick (state) {
            this.state = state
            console.log(this.state)
          }`
      }
    },
    methods: {
      optionClick (state) {
        this.state = state
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 70%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
